<template>
  <el-table
    :data="goodsList"
    border
    style="width: 100%"
    :cell-class-name="proCode"
  >
    <el-table-column fixed type="index" label="序号" width="50">
    </el-table-column>
    <el-table-column fixed prop="proCode" label="商品编号" width="150">
      <template slot-scope="scope">
        <WarehouseProductView :data="scope.row"/>
      </template>
    </el-table-column>
    <el-table-column prop="proName" label="名称" width="120">
    </el-table-column>
    <el-table-column label="助记名" width="120">
      <template slot-scope="scope">  
        {{ scope.row.proCode + '-' + scope.row.proName }}  
      </template> 
    </el-table-column>
    <el-table-column prop="typeName" label="分类" width="120">
    </el-table-column>
    <el-table-column prop="unitName" label="主单位" width="120">
    </el-table-column>
    <el-table-column prop="price" label="销售价格" width="100">
    </el-table-column>
    <el-table-column prop="proRemark" label="备注" width="120">
    </el-table-column>
    <el-table-column prop="createDate" label="创建时间" width="120"> 
    </el-table-column>
    <el-table-column prop="createName" label="创建人" width="120"> 
    </el-table-column>
    <el-table-column prop="modifyDate" label="修改时间" width="120">
    </el-table-column>
    <el-table-column prop="modifyName" label="修改人" width="120">
    </el-table-column>
    <el-table-column fixed="right" label="操作" width="100">
      <template slot-scope="scope">
        <WarehouseProductUpdate :goodsId="scope.row.id" @refreshData="refreshData"/>
        <el-button type="text" size="small" @click="deleteById(scope.row.id)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import WarehouseProductView from '@/components/warehouse/WarehouseProductView.vue';
import WarehouseProductUpdate from '@/components/warehouse/WarehouseProductUpdate.vue';

export default {
  name: "WarehouseProductTable",
  components: { WarehouseProductView, WarehouseProductUpdate },
  props: ['goodsList'],
  methods: {
    updateProduct(row) {
      console.log(row);
    },
    proCode(row) {
      if (row.columnIndex == 1) {
        return "proCode";
      }
    },
    handleClose(done) {
      done()
    },

    // 刷新数据
    refreshData() {
      this.$emit("refreshData");
    },

    // 根据id删除商品
    deleteById (id) {
      this.$confirm("此操作将永久删除该商品, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        const url = "/api/goods/delete";
        const params = { id };
        this.$http
          .delete(url, { params })
          .then(rs => {
            if (rs.data.code == "200") {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.refreshData();
            } else {
              this.$message({
                type: "error",
                message: "删除失败!",
              });
            }
          })
      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除",
        });
      });
    },
  },
  data() {
    return {
      dialogVisible: false,
    };
  },

};
</script>

<style>
.proCode {
  color: #0090ff !important;
  cursor: pointer;
}

</style>